<template>
    <div class="cparkCardType-page">
      <breadcrumb />
      <div class="search-container">
        <Search :listData="listData" @search="getSearchParams" />
      </div>
      <div class="table-container">
        <div class="table-component">
          <Buttons @buttons="getButtonsParams" />
          <Table :tableData="table.data" :loading="table.loading" @table="getTableParams" />
          <div class="pagination">
            <el-pagination
              v-model:current-page="pagination.currentPage"
              v-model:page-size="pagination.pageSize"
              :page-sizes="pagination.pageSizes"
              layout="total,sizes, prev, pager, next, jumper"
              :total="table.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
          <el-dialog
            v-model="dialogVisible"
            :title="title"
            destroy-on-close
            :before-close="handleClose"
            :close-on-click-modal="false"
            width="520px"
          >
            <component
              :is="componentTag"
              @operationDone="operationDone"
              :operationId="operationId"
              :listData="listData"
            >
            </component
          ></el-dialog>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import breadcrumb from "@/components/breadcrumb/index.vue";
  import Search from "./components/search.vue";
  import Buttons from "./components/buttons.vue";
  import Table from "./components/table.vue";
  import addComponent from "./components/addComponent.vue";
  import editComponent from "./components/editComponent.vue";
  import { getCardTypeList, getStatusAPi } from "./request.js";
  import { ref, reactive, shallowRef } from "vue";
  
  // 弹窗
  const title = ref("");
  const dialogVisible = ref(false);
  const componentTag = shallowRef("");
  const operationId = ref("");
  const operationDone = (r) => {
    dialogVisible.value = false;
    operationId.value = "";
    if (!r) {
      getData();
    }
  };
  
  const handleClose = () => {
    dialogVisible.value = false;
  };
  
  // 搜索
  const searchModel = ref({});
  
  // 搜索操作
  const getSearchParams = (value) => {
    // searchParams.value = value;
    searchModel.value = value;
    getData();
  };
  
  // buttons按钮
  const getButtonsParams = (value) => {
    console.log(value);
    if (value == "add") {
      title.value = "新增卡类型";
      componentTag.value = addComponent;
    }
    dialogVisible.value = true;
  };
  
  // table操作
  const getTableParams = (value) => {
    console.log("value ===>", value);
    if (value.operation == "edit") {
      title.value = "编辑卡类型";
      componentTag.value = editComponent;
    }
    operationId.value = value;
    dialogVisible.value = true;
  };
  
  
  
  // 表格
  const table = reactive({
    data: [],
    total: 0,
    loading: true,
  });
  
  const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    pageSizes: [10, 20, 30, 50],
  });
  
  const handleCurrentChange = (value) => {
    pagination.currentPage = value;
    getData();
  };
  
  const handleSizeChange = (value) => {
    pagination.pageSize = value;
    getData();
  };
  
  const getData = async () => {
    table.loading = true;
    await getCardTypeList({
      name: searchModel.value.name,
      type: searchModel.value.type,
      allowOnline: searchModel.value.allowOnline,
      status: searchModel.value.status,
      pageNo: pagination.currentPage,
      pageSize: pagination.pageSize,
    }).then((res) => {
      console.log("res ===>", res);
      if (res.data.code === 0) {
        table.data = res.data.result.items;
        table.total = parseInt(res.data.result.total);
        table.loading = false;
      }
    });
  };
  
  const listData = reactive({
    statusList: [
      {
        id: 1,
        name: "启用中",
      },
      {
        id: 0,
        name: "已停用",
      },
    ],
  });
  
  getData();
  </script>
  
  <style lang="less" scoped>
  .cparkCardType-page {
    .search-container {
      margin-top: 16px;
      min-height: 100%;
      padding: 24px 24px 8px 24px;
      background: #fff;
      border-radius: 6px;
    }
    .table-container {
      margin-top: 16px;
      min-height: 100%;
      padding: 24px;
      background: #fff;
      border-radius: 6px;
    }
    .table-component {
      .pagination {
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
  }
  </style>
  